<template>
<div class="home">
    <Row class="header" type="flex" align="middle">
            <div class="logo">
                <img src="../assets/img/logo.png" height="30" alt="">
                <span>VUE</span>CMS <Tag>v1.0</Tag>
            </div>
            <Dropdown class="login-info" placement="bottom-end"  @on-click="do_logout">
                <Button type="ghost">
                    <Avatar style="height:30px">{{subName()}}</Avatar>{{username}}
                    <Icon type="arrow-down-b"></Icon>
                </Button> 
                <DropdownMenu slot="list">
                    <DropdownItem divided name="logout"><i class="fa fa-key"></i>Log out</DropdownItem>
                    <DropdownItem divided name="setting"><i class="fa fa-cog"></i>设置</DropdownItem>
                </DropdownMenu>
            </Dropdown>
    </Row> 
    <div class="sidebar">
      <Menu theme="dark" width="100%" class="menu" :active-name="activeName" :accordion="true">
        <template v-for="menu in menus"><!--循环菜单对象-->
        <!--如果包含子菜单（subMenu数组存在），那么产生Submenu-->
          <Submenu :name="menu.id" :key="menu.id" v-if="menu.subMenu">
            <template slot="title">
                  <i class="fa"></i>
                  {{menu.name}}
              </template>
              <MenuItem :name="subMenu.id" v-for="subMenu in menu.subMenu" :key="subMenu.id">
                <router-link :to="subMenu.to" :key="subMenu.id">
                  <i class="fa"></i>
                    {{subMenu.name}}
                </router-link>
              </MenuItem>
          </Submenu>
          <!--否则直接生成菜单-->
          <MenuItem :name="menu.id" :key="menu.id" v-else>
              <router-link :to="menu.to" :key="menu.id">
                <i class="fa"></i>
                  {{menu.name}}
              </router-link>
          </MenuItem>
        </template>
      </Menu>
    </div>
    <div class="main-content">
      <router-view></router-view> 
      <p class="vm-author">cms</p> 
    </div>
</div>  
</template>
<script>
let _menus = JSON.parse(sessionStorage.getItem('user_menu'))
export default {
  name: 'VmHome',
  mounted() {
    //处理菜单选中状态
    let self = this
    let to
    for (let m in _menus) {
      if (_menus[m].subMenu) {
        let temp = false
        for (let n in _menus[m].subMenu) {
          //alert(_menus[m].subMenu[n].to + "<-->" + self.$route.name)
          if (_menus[m].subMenu[n].to == self.$route.name) {
            self.activeName = _menus[m].subMenu[n].id
            to = _menus[m].subMenu[n].to
            temp = true
            break
          }
        }
        if (temp) {
          break
        }
      } else {
        //alert(_menus[m].to + "<-->" + self.$route.name)
        if (_menus[m].to == self.$route.name) {
          self.activeName = _menus[m].id
          to = _menus[m].to
          break
        }
      }
    }
    if (!to && _menus && _menus.length > 0) {
      let sub = _menus[0].subMenu
      self.activeName = sub ? sub[0].id : _menus[0].id
      self.$router.push(sub ? sub[0].to : _menus[0].to)
    }
  },
  data() {
    return {
      activeName: '1',
      menus: _menus,
      username: sessionStorage.getItem('user_name'),
      subName() {
        let userName = sessionStorage.getItem('user_name')
        if (userName) {
          return userName.substr(0, 1).toUpperCase()
        } else {
          return 'error'
        }
      }
    }
  },
  methods: {
    do_logout(name) {
      switch (name) {
        case 'logout':
          this.$router.push('/')
          break
      }
    }
  }
}
</script>